<template>
  <yt-page title="特殊作业统计" scroll :rightData="rightData">
    <!-- <yt-card title="概览">
      <yt-cell v-for="(item, index) in grid" :key="index" :label="item.name" labelWidth="150px" :value="`共计 ${(item.enterprises && item.enterprises.length) || 0} 家企业`"></yt-cell>
    </yt-card> -->
    <yt-card title="作业票证按月统计">
      <div ref="chartLineMonth" style="width: 100%; height: 400px"></div>
    </yt-card>
    <yt-card title="安管人员统计">
      <div ref="chartPie" style="width: 100%; height: 400px"></div>
    </yt-card>
    <yt-card title="作业票证/特殊作业人员持证统计">
      <div ref="chartLine" style="width: 100%; height: 400px"></div>
    </yt-card>
    <yt-popup pos="right" v-model="search" :mask="true" slot="alert">
      <yt-page class="page" :flex="true" :leftData="[]" title="企业列表">
        <yt-form style="background-color: #fff">
          <yt-radioList class="list" :list="entList" label="EnterpriseName" val="id" v-model="selected" :inline="false"/>
          <yt-btn-group slot="btn" :shadow="false">
            <yt-btn theme="white" @click="search = false">关闭</yt-btn>
            <yt-btn @click="onSearch(selected)">确定</yt-btn>
          </yt-btn-group>
        </yt-form>
      </yt-page>
    </yt-popup>
  </yt-page>
</template>

<script>
import gql from './special-work.gql'
import { commonApi } from '@/common/api/commonApi.js'
import _ from 'lodash'
import echarts from 'echarts/lib/echarts'
import 'echarts/theme/macarons'
import 'echarts/lib/chart/line'

const CATEGROY = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

export default {
  data() {
      return {
        search: false,
        selected: [],
        entList: [],
        rightData: [{
          font: 'yt-icon yt-icon-search',
          click: () => {
            this.search = !this.search
          }
        }],
        total: {
          manager: 0,
          worker: 0,
          admins: 0
        },
        person: [],
        category: [],
        chartLineObj: null,
        chartPieObj: null,
        options: {
          search: { disabledMultiple: true, float: 'left' },
          columns: [
            {
              label: '企业名称',
              field: 'EnterpriseId',
              base: { layout: 'select', label: 'EnterpriseName', value: 'id' },
              search: { multiple: false, placeholder: '请输入企业名称...' },
              source: { collectionName: 'ent_enterprise' }
            }
          ]
        },
        chartLineOption: {
          grid: {
            top: '20%'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['作业票证数', '特殊作业人员持证数'],
            align: 'right'
          },
          xAxis: [
            {
              name: '作业种类',
              nameLocation: 'center',
              nameGap: '30',
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              name: '票证数/持证数',
              nameTextStyle: {
                padding: [0, 0, 0, 30]
              },
              type: 'value'
            }
          ],
          series: [
            {
              name: '作业票证数',
              type: 'bar',
              data: []
            },
            {
              name: '特殊作业人员持证数',
              type: 'bar',
              data: []
            }
          ]
        },
        chartPieOption: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            y: 'top',
            data: []
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['50%', '60%'],
              avoidLabelOverlap: false,
              data: [],
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '18',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              }
            }
          ]
        },
        chartLineMonthOption: {
          grid: {
            top: '10%'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              name: '月份',
              nameLocation: 'end',
              // nameGap: '30',
              type: 'category',
              data: CATEGROY,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              name: '票证数/持证数',
              nameTextStyle: {
                padding: [0, 0, 0, 30]
              },
              type: 'value'
            }
          ],
          series: [
            {
              name: '作业票证数',
              type: 'line',
              data: [],
              itemStyle: { normal: { areaStyle: { type: 'default' } } }
            }
          ]
        }
      }
    },
    activated() {
      this.chartLineObj = echarts.init(this.$refs.chartLine, 'macarons')
      this.chartPieObj = echarts.init(this.$refs.chartPie, 'macarons')
      this.chartLineMonthObj = echarts.init(this.$refs.chartLineMonth, 'macarons')
      this.init()
    },
    methods: {
      getData({ keys, values }, array, back) {
        let obj = _.zipObject(keys, values)
        return array.map(v => {
          return back ? back(obj, v) : obj[v.D_code] || 0
        })
      },
      getApi(id) {
        return commonApi.gql(gql, {
          'qjson1': id ? { 'equalTo': ['req_departName', id] } : {},
          'qjson2': id ? { 'equalTo': ['work_unit', id] } : {}
        })
      },
      async onSearch(id) {
        this.search = false
        let { manager, worker, admins, reqDate, managerCategory, workType, jobTitle } = await this.getApi(id)
        this.total = { manager, worker, admins }
        let data = this.getData(managerCategory, this.person, (obj, v) => {
          return {
            name: v.D_text,
            value: obj[v.D_code] || 0
          }
        })
        this.chartPieOption.series[0].data = data
        this.chartPieObj.setOption(this.chartPieOption)

        this.chartLineMonthOption.series[0].data = CATEGROY.map(v => reqDate[parseInt(v)] || 0)
        this.chartLineMonthObj.setOption(this.chartLineMonthOption)

        this.chartLineOption.series[0].data = this.getData(workType, this.category)
        this.chartLineOption.series[1].data = this.getData(jobTitle, this.category)
        this.chartLineObj.setOption(this.chartLineOption)
      },
      async init() {
        let p = [
          commonApi.dictionary('safety_ma'),
          commonApi.dictionary('work_type')
        ]
        let [person, category] = await Promise.all(p)
        this.person = person
        this.chartPieOption.legend.data = person.map(v => v.D_text)
        this.category = category
        this.chartLineOption.xAxis[0].data = category.map(v => v.D_text)
        this.entList = await commonApi.search('ent_enterprise')
        this.onSearch()
      }
    }
}
</script>
